import React from 'react';
import ReactDOM from 'react-dom';
/**
 * 组件的生命周期
 * 
 * React15的时候 domdiff stack reconcilier 这个过程不能中断，一气呵成 
 * React16 引入了Fiber, domdiff阶段可能会暂停和恢复 
 * 
 * 生命周期有变化
 * static getDerivedStateFromProps(props, state) 这个生命周期的功能实际上就是将传入的props映射到state上面
 * 为什么把这个方法设置为静态的呢？
 * 因为不希望用户在此方法调用this.setState引起死循环
 * 
 * getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()的第三个参数
 * 
 * 少了 will.xxxx 
 * componentWillMount 
 * componentWillUpdate 
 * componentWillReceiveProps
 */

 class ScrollList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.container = React.createRef();
  }
  addMessage = () => {
    this.setState(
      state => ({ messages: [`${state.messages.length}`, ...state.messages] })
    );
  }
  componentDidMount() {
    console.log(this);
    this.timer = window.setInterval(() => {
      this.addMessage();
    }, 1000);
  }
  componentWillUnmount() {
    window.clearInterval(this.timer);
  }
  getSnapshotBeforeUpdate() {
    console.log(1232)
    return {
      prevScrollTop: this.container.current.scrollTop,
      prevScrollHeight: this.container.current.scrollHeight
    }
  }
  componentDidUpdate(prevProps, prevState, { prevScrollTop, prevScrollHeight }) {
    this.container.current.scrollTop = prevScrollTop + (this.container.current.scrollHeight - prevScrollHeight);
  }
  render() {
    let style = {
      height: '100px',
      width: '200px',
      border: '1px solid red',
      overflow: 'auto'
    }
    return (
      <div style={style} ref={this.container}>
        {
          this.state.messages.map((message, index) => (
            <div key={index}>{message}</div>
          ))
        }
      </div>
    )
  }
}

ReactDOM.render(<ScrollList />, document.getElementById('root'));



// class Counter extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { number: 0 };
//     console.log('Counter 1.constructor');
//   }
//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 });
//   }
//   render() {
//     console.log('Counter 3.render');
//     return (
//       <div>
//         <p>{this.state.number}</p>
//         <ChildCounter count={this.state.number} />
//         <button onClick={this.handleClick}>+</button>
//       </div>
//     )
//   }
// }
// class ChildCounter extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { title: 'ChildCounter', number: 0 };
//   }
  
//   //componentWillReceiveProps 
//   static getDerivedStateFromProps(nextProps, nextState) {
//     const { count } = nextProps;
//     if (count % 2 === 0) {
//       return { number: count * 2 };
//     } else {
//       return { number: count * 3 };
//     }
//   }
//   render() {
//     console.log('ChildCounter 2.render');
//     return <div>{this.state.title}:{this.state.number}</div>
//   }
// }
// ReactDOM.render(<Counter />, document.getElementById('root'));
